<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>全国车辆品牌分布图</title>
	<link href="https://cdn.jsdelivr.net/npm/feidao-css@latest/feidao.css" type="text/css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/daoke.css">
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="js/echarts.js"></script>
	<script src="https://cdn.bootcss.com/dot/1.1.2/doT.min.js"></script>
	<link rel="shortcut icon" href="http://01feidao.com/images/32x32.png">
	<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"> -->

	<!-- <script src="js/china.js"></script> -->
	<!-- <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
	<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/extension/bmap.min.js"></script> -->
</head>

<body>
	<div data-feidao-id="shadow"
		style="background:url(images/arr.png) ;height: 100%;background-size: cover;padding:0 40px;" class="b-box pos-r">
		<div data-feidao-id="top" style="height: 80px;cursor: pointer;display: flex;">

		</div>
		<div class="flex-c" style="margin-left:2%;width:130px;cursor:pointer;top: -45px;position: relative;"
			data-feidao-id="back">
			<img src="./images/fanhui.png" style="height: 36px;width: 36px;margin-right: 10px">
			<span style="font-weight: 500;font-size: 26px;color:#0ef7fb">返回</span>
		</div>
		<div class="flex-cc" style="height:60px;padding:20px 0;margin:0 auto;align-items: flex-end">
			<div data-feidao-id="name"
				style=" background:url(images/aa.png);height: 42px;width: 160px;color: #0efcff;font-size: 18px;line-height: 42px;padding-left: 17px">
				全国总数据</div>
			<div class="flex-cc" style="height:80px;margin: 0 10px" data-feidoa-id="title">
			</div>
			<div style="height: 42px;width: 160px"></div>
		</div>
		<div class="flex-js-c" style=" width:97%;margin-left: 20px;height: calc(100% - 255px);">
			<div class="pos-r" style="height: 100%; width:100%;
			background-size: 100% 100%;">
				<!-- <div class="pos-a" style="top:-60px;left:0;height: 40px;width: 160px; background:url(images/cc.png)
					;color: #0efcff;font-size: 18px;line-height: 42px;padding-left: 26px">云图概况</div> -->
				<div id="mapDiv" style="position:absolute;height: 100%; width:100%" data-feidao-id="map"></div>
			</div>
			<!-- <div class="pos-r" style="height:100%; width:27%; background:url(images/ff.png) no-repeat;
			background-size: 100% 100%;">
			<div class="flex-c" style="height:50px;width:99%;background: #152f5b;margin: 2px 2px;">
				<div class="font20 color-f text-l" style="padding-left:50px;width:65%">品牌</div>
				<div class="font20 color-f text-l" style="width:35%">数量</div>
			</div>
			<div class="" style="height:calc(100% - 50px);overflow-x: auto;" data-feidoa-id="content">
			</div>

			<div class="pos-a"
			style="top:-60px;left:0;height: 40px;width: 170px; background:url(images/cc.png);color: #0efcff;font-size: 18px;line-height: 42px;padding-left: 26px">
			区域车辆品牌汇总</div>
		</div> -->
		</div>
	</div>
</body>
<script>

	const map = document.querySelector('[data-feidao-id="map"]');
	// const content = document.querySelector('[data-feidoa-id="content"]');
	const title = document.querySelector('[data-feidoa-id="title"]');
	const name_ele = document.querySelector('[data-feidao-id="name"]');
	const top_ele = document.querySelector('[data-feidao-id="top"]');
	const back = document.querySelector('[data-feidao-id="back"]');
	const shadow = document.querySelector('[data-feidao-id="shadow"]');

	var map_data = null;
	var myChart = false;
	var full_screen = false;
	const history = [];

	const title_tpl = doT.template(`
	{{~it:v}}
	<div class="text-c"
	style="height:80px;width: 40px;margin-right:18px;line-height: 80px;font-size:48px;color: #02fb94;background:url(images/bb.png);">
	{{=v}}</div>
	{{~}}`);

	const tpl = doT.template(`
	{{~it:v}}
	<div class="flex-c" style="height:50px;width:100%">
		<div class="font20 color-f text-l" style="padding-left:50px;width:65%">{{=v.type}}</div>
		<div class="font20 color-f text-l" style="width:35%">{{=v.value}}</div>
	</div>
	{{~}}`);

	function render(name, totle, classify) {
		name_ele.innerHTML = name;

		// const html = tpl(classify);
		// content.innerHTML = html;

		const title_html = title_tpl(totle.toString().split(''));
		title.innerHTML = title_html;
	}

	function randomData() {
		return 0;
	}

	function fullScreenFun() {
		var iFullscreen = false; //当前是否全屏状态
		var fullscreenEnabled = document.fullscreenEnabled ||
			document.mozFullScreenEnabled ||
			document.webkitFullscreenEnabled ||
			document.msFullscreenEnabled;

		if (fullscreenEnabled) {
			let de = document.documentElement;
			if (iFullscreen) {
				//关闭全屏
				if (document.exitFullscreen) {
					document.exitFullscreen();
				} else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if (document.webkitCancelFullScreen) {
					document.webkitCancelFullScreen();
				}
				full_screen = false;
			} else {
				//打开全屏
				if (de.requestFullscreen) {
					de.requestFullscreen();
				} else if (de.mozRequestFullScreen) {
					de.mozRequestFullScreen();
				} else if (de.webkitRequestFullScreen) {
					de.webkitRequestFullScreen();
				}
			}
		} else {
			alert('浏览器当前不能全屏');
		}
	}
	shadow.addEventListener('click', () => {
		fullScreenFun();
		const is = is_FullScreen()
		if (!is && myChart && !full_screen) {
			setTimeout(() => {
				myChart.clear();
				myChart.dispose();
				myChart = false;
				load()
				while (history.length !== 0) {
					history.pop();
				}
				full_screen = true;
			}, 100);
		}
	});



	function is_FullScreen() {
		return (document.body.scrollHeight == window.screen.height && document.body.scrollWidth == window.screen.width);
	}

	function load() {
		const optionMap = function (mydata, center, zoom, sides, select, left_charts_data, bottom_charts_data, right_charts_data, name) {
			debugger
			const left = [{ visualMap: false, value: 10, name: '东风商用车' }, { visualMap: false, value: 10, name: '解放' }, { visualMap: false, value: 10, name: '柳汽' }, { visualMap: false, value: 10, name: '红岩' }, { visualMap: false, value: 10, name: '重汽' }, { visualMap: false, value: 10, name: '其他' }].map((item, index) => {
				return { ...item, value: sides[0][index] };
			}).filter((j) => {
				return j.value !== 0;
			});
			const right = [{ visualMap: false, name: '牵引' }, { visualMap: false, name: '载货' }, { visualMap: false, name: '工程' }].map((item, index) => {
				return { ...item, value: sides[1][index] };
			}).filter((j) => {
				return j.value !== 0;
			});

			const left_chart_names = ['2017年', '2018年', '2019年'];
			const left_chart_cats = [{
				name: '东风商用车',
				color: 'aqua'
			}, {
				name: '解放',
				color: 'aquamarine'
			}, {
				name: '柳汽',
				color: 'bisque'
			}, {
				name: '红岩',
				color: 'blueviolet'
			}, {
				name: '重汽',
				color: 'burlywood'
			}, {
				name: '其他',
				color: 'crimson'
			}, {
			}];

			const bottom_chart_names = ['HT11干线快运', 'HT12长途运输', 'HT13中长途运输', 'HT14区域运输', 'HR11长途运输', 'HR21中长途运输', 'MR11中长途运输', 'HC11公路重载', 'HC41公路标载', 'HC22工程重载', 'HC32工程标载'];
			const bottom_chart_cats = ['东风商用车', '解放', '柳汽', '红岩', '重汽', '其他'];

			const right_chart_names = ['终端', '大客户', '二网'];
			const right_chart_cats = ['东风商用车', '解放', '柳汽', '红岩', '重汽', '其他'];

			const _data = JSON.parse(JSON.stringify(mydata));
			if (select) {
				_data.push(select);
			}
			const obj = {
				// backgroundColor: '',
				// tooltip: {
				// 	trigger: 'item'
				// },
				//左侧小导航图标
				title: [{
					text: `{b|     2019年${name}各品牌车辆分布}`,
					subtext: '{c|      点击品牌,右侧展示当前品牌对应的车型}',
					top: 250,
					left: 8,
					itemGap: 5,
					textStyle: {
						rich: {
							b: {
								backgroundColor: {
									image: './images/cc.png'
								},
								height: 30,
								color: '#0efcff',
								fontStyle: 'normal',
								fontWeight: '600',
								fontFamily: 'sans-serif',
								fontSize: 18
							}
						}
					},
					subtextStyle: {
						rich: {
							c: {
								backgroundColor: {
									image: './images/ee.png'
								},
								color: '#fff',
								height: 30,
								fontStyle: 'normal',
								fontWeight: '600',
								fontFamily: 'sans-serif',
								fontSize: 14,
								width: 290
							}
						}
					}
				}, {
					text: `{b|     近3年${name}TIV各品牌分布、东风占比}`,
					top: 0,
					left: 8,
					textStyle: {
						rich: {
							b: {
								backgroundColor: {
									image: './images/cc.png'
								},
								height: 35,
								color: '#0efcff',
								fontStyle: 'normal',
								fontWeight: '600',
								fontFamily: 'sans-serif',
								fontSize: 18
							}
						}
					},
					subtextStyle: {
						rich: {
							c: {
								backgroundColor: {
									image: './images/ee.png'
								},
								color: '#fff',
								height: 30,
								fontStyle: 'normal',
								fontWeight: '600',
								fontFamily: 'sans-serif',
								fontSize: 14,
								width: 290
							}
						}
					},
					tooltip: {
						formatter: (e) => {
							debugger
						}
					}
				}, {
					text: `{b|     2019年${name}各车型车辆分布}`,
					subtext: '{c|      点击车型,右侧展示当前车型对应的品牌}',
					top: 0,
					left: 1400,
					textStyle: {
						rich: {
							b: {
								backgroundColor: {
									image: './images/cc.png'
								},
								height: 35,
								color: '#0efcff',
								fontStyle: 'normal',
								fontWeight: '600',
								fontFamily: 'sans-serif',
								fontSize: 18
							}
						}
					},
					subtextStyle: {
						rich: {
							c: {
								backgroundColor: {
									image: './images/ee.png'
								},
								color: '#fff',
								height: 30,
								fontStyle: 'normal',
								fontWeight: '600',
								fontFamily: 'sans-serif',
								fontSize: 14,
								width: 290
							}
						}
					},
				}, {
					text: `{b|     2019年${name}各车型份额占比}`,
					top: 250,
					left: 1400,
					textStyle: {
						rich: {
							b: {
								backgroundColor: {
									image: './images/cc.png'
								},
								height: 35,
								color: '#0efcff',
								fontStyle: 'normal',
								fontWeight: '600',
								fontFamily: 'sans-serif',
								fontSize: 18
							}
						}
					}
				},
				{
					text: `{b|     2019年${name}各品牌车辆份额占比}`,
					left: 8,
					bottom: 230,
					textStyle: {
						rich: {
							b: {
								backgroundColor: {
									image: './images/cc.png'
								},
								height: 35,
								color: '#0efcff',
								fontStyle: 'normal',
								fontWeight: '600',
								fontFamily: 'sans-serif',
								fontSize: 18
							}
						}
					}
				}, {
					text: `{b|     2019年${name}各品牌分区域车辆分布}`,
					left: 500,
					bottom: 230,
					textStyle: {
						rich: {
							b: {
								backgroundColor: {
									image: './images/cc.png'
								},
								height: 35,
								color: '#0efcff',
								fontStyle: 'normal',
								fontWeight: '600',
								fontFamily: 'sans-serif',
								fontSize: 18
							}
						}
					}
				}, {
					text: `{b|     2019年全国分销售渠道车辆分布}`,
					left: 1400,
					bottom: 230,
					textStyle: {
						rich: {
							b: {
								backgroundColor: {
									image: './images/cc.png'
								},
								height: 35,
								color: '#0efcff',
								fontStyle: 'normal',
								fontWeight: '600',
								fontFamily: 'sans-serif',
								fontSize: 18
							}
						}
					}
				}],
				legend: [{
					data: left_chart_cats.map((i) => i.name),
					orient: 'horizontal',
					formatter: function (name) {
						return '{a|' + name + '}'
					},
					textStyle: {
						rich: {
							a: {
								color: 'white'
							}
						}
					}
				}],
				visualMap: {
					show: false,
					x: 'left',
					y: 'center',
					splitList: [
						{ start: 35000, end: 40000 }, { start: 30000, end: 35000 },
						{ start: 25000, end: 30000 }, { start: 20000, end: 25000 },
						{ start: 15000, end: 20000 }, { start: 0, end: 15000 },
					],
					color: ['#003567'],
					textStyle: {
						color: 'white'
					}
				},
				grid: [{
					top: 352,
					width: 350,
					bottom: 275,
					left: 10,
					containLabel: true
				}, {
					top: 100,
					width: 350,
					bottom: 600,
					right: 10,
					containLabel: true
				}, {
					top: 70,
					width: 350,
					bottom: 600,
					left: 10,
					containLabel: true
				}, {
					top: 620,
					width: 800,
					bottom: 0,
					left: 500,
					containLabel: true
				}, {
					top: 620,
					width: 350,
					bottom: 0,
					right: 10,
					containLabel: true
				}],
				xAxis: [{
					type: 'category',
					data: left.map((i) => { return i.name; }),
					gridIndex: 0,
					axisLine: {
						lineStyle: {
							color: 'white',
							fontWeight: 'bold'
						}
					},
					axisLabel: {
						color: '#708acc',
						fontWeight: 'bold',
						interval: 0,
						rotate: 40
					}
				}, {
					type: 'category',
					data: right.map((i) => { return i.name; }),
					gridIndex: 1,
					axisLine: {
						lineStyle: {
							color: 'white',
							fontWeight: 'bold'
						}
					},
					axisLabel: {
						color: '#708acc',
						fontWeight: 'bold'
					}
				}, {
					type: 'category',
					data: left_chart_names,
					gridIndex: 2,
					axisLine: {
						lineStyle: {
							color: 'white',
							fontWeight: 'bold'
						}
					},
					axisLabel: {
						color: '#708acc',
						fontWeight: 'bold'
					}
				}, {
					type: 'value',
					gridIndex: 3,
					axisLine: {
						lineStyle: {
							color: '#708acc',
							fontWeight: 'bold'
						}
					},
					splitLine: {
						show: false
					}
				}, {
					type: 'category',
					data: right_chart_names,
					gridIndex: 4,
					axisLine: {
						lineStyle: {
							color: 'white',
							fontWeight: 'bold'
						}
					},
					axisLabel: {
						color: '#708acc',
						fontWeight: 'bold'
					}
				}],
				yAxis: [{
					type: 'value',
					gridIndex: 0,
					axisLine: {
						lineStyle: {
							color: '#708acc',
							fontWeight: 'bold'
						}
					},
					splitLine: {
						show: false
					}
				}, {
					type: 'value',
					gridIndex: 1,
					axisLine: {
						lineStyle: {
							color: '#708acc',
							fontWeight: 'bold'
						}
					},
					splitLine: {
						show: false
					}
				}, {
					type: 'value',
					gridIndex: 2,
					axisLine: {
						lineStyle: {
							color: '#708acc',
							fontWeight: 'bold'
						}
					},
					splitLine: {
						show: false
					}
				}, {
					type: 'category',
					data: bottom_chart_names,
					gridIndex: 3,
					axisLine: {
						lineStyle: {
							color: 'white',
							fontWeight: 'bold'
						}
					},
					axisLabel: {
						color: '#708acc',
						fontWeight: 'bold'
					}
				}, {
					type: 'value',
					gridIndex: 4,
					axisLine: {
						lineStyle: {
							color: '#708acc',
							fontWeight: 'bold'
						}
					},
					splitLine: {
						show: false
					}
				}],
				tooltip: {
					show: true,
				},
				//配置属性
				series: [
					{
						name: '区域',
						type: 'map',
						mapType: 'china',
						// roam: 'scale',
						roam: true,
						// center: [115.97, 29.71],
						center,
						zoom,
						scaleLimit: {
							min: 0.5,
							max: 15
						},
						label: {
							show: true,
							normal: {
								areaStyle: {
									background: 'red',
									color: '#ddd'
								},
								label: {
									textStyle: {
										color: '#c12e34'

									}
								},
								show: true  //省份名称
							},
							emphasis: {
								show: false
							}
						},
						itemStyle: {
							normal: {
								label: {
									show: true,
									color: 'white',
									formatter: (e) => {
										const name = e.name;
										if (e.data && e.data.value) {
											const v = e.data.value
											return '{a|' + name + '}' + '\n\n' + '{b|' + v + '}';
										} else {
											return '{a|' + name + '}';
										}
									},
									rich: {
										a: {
											color: 'white',
											fontSize: 14,
											fontWeight: 'bold',
											fontFamily: '微软雅黑'
										},
										b: {
											color: '#02fb94',
											fontWeight: 'bold',
											fontSize: 14
										}
									}
								}
								, borderWidth: 3 // 区域边框宽度
								, borderColor: '#009ee6' // 区域边框颜色
								// , shadowBlur: 2,
								// shadowColor: '#000',
								// shadowOffsetX: 1,
								// shadowOffsetY: 2
							},
							emphasis: {
								// 鼠标滑动背景色
								areaColor: "#0052c2",
								label: {
									show: false,
									color: 'white'
								}
							}
						},
						data: _data //数据
						// , left: "10%", right: "10%", top: 20, bottom: 20
					},
					{
						type: 'bar',
						xAxisIndex: 0,
						yAxisIndex: 0,
						data: left,
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#62dbe3'
								}, {
									offset: 1,
									color: '#065eb0'
								}])
							},
							emphasis: {
								color: '#62dbe3'
							}
						},
						label: {
							normal: {
								show: true,
								position: 'top',
								color: '#0efcff',
								fontWeight: 'bold'
							}
						},
					},
					{
						type: 'bar',
						xAxisIndex: 1,
						yAxisIndex: 1,
						data: right,
						itemStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: '#62dbe3'
								}, {
									offset: 1,
									color: '#065eb0'
								}])
							},
							emphasis: {
								color: '#62dbe3'
							}
						},
						label: {
							normal: {
								show: true,
								position: 'top',
								color: '#0efcff',
								fontWeight: 'bold'
							}
						},
					}, {
						type: 'pie',
						radius: '18%',
						center: ['12%', '85%'],
						data: left,
						itemStyle: {
							normal: {
								color: '#003567',
								borderWidth: 3,
								borderColor: '#009ee6',
							},
							emphasis: {
								color: '#0052c2',
								borderWidth: 3,
								borderColor: '#009ee6'
							}
						},
						label: {
							color: 'white',
							borderColor: 'white',
							fontWeight: 'bold'
						},
						labelLine: {
							lineStyle: {
								color: 'white',
							}
						},
						tooltip: {
							formatter: (e) => {
								return '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#009ee6;"></span>' + e.name + ': ' + e.value + '(' + e.percent + '%)';
							}
						}
					},
					{
						type: 'pie',
						radius: '18%',
						center: ['90%', '50%'],
						data: right,
						itemStyle: {
							normal: {
								color: '#003567',
								borderWidth: 3,
								borderColor: '#009ee6',
							},
							emphasis: {
								color: '#0052c2',
								borderWidth: 3,
								borderColor: '#009ee6'
							}
						},
						label: {
							color: 'white',
							borderColor: 'white',
							fontWeight: 'bold'
						},
						labelLine: {
							lineStyle: {
								color: 'white',
							}
						},
						tooltip: {
							formatter: (e) => {
								return '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#009ee6;"></span>' + e.name + ': ' + e.value + '(' + e.percent + '%)';
							}
						}
					}
				]
			}
			left_charts_data.map((i, index) => {
				obj.series.push({
					name: left_chart_cats[index].name,
					type: 'bar',
					stack: 'left-chart',
					xAxisIndex: 2,
					yAxisIndex: 2,
					data: i.map((j) => {
						return {
							value: j,
							visualMap: false
						}
					})
				});
			})
			bottom_charts_data.map((i, index) => {
				obj.series.push({
					name: bottom_chart_cats[index],
					type: 'bar',
					stack: 'bottom-chart',
					xAxisIndex: 3,
					yAxisIndex: 3,
					data: i.map((j) => {
						return {
							value: j,
							visualMap: false
						}
					})
				});
			})
			if (right_charts_data) {
				obj.series.push({
					name: '2019年全国各品牌车辆分布',
					type: 'bar',
					xAxisIndex: 4,
					yAxisIndex: 4,
					data: right_charts_data.map((j) => {
						return {
							value: j,
							visualMap: false
						}
					}),
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#62dbe3'
							}, {
								offset: 1,
								color: '#065eb0'
							}])
						},
						emphasis: {
							color: '#62dbe3'
						}
					},
					label: {
						normal: {
							show: true,
							position: 'top',
							color: '#0efcff',
							fontWeight: 'bold'
						}
					}
				});
			}
			return obj;
		};
		// 初始化echarts实例
		myChart = (() => {
			if (!myChart) {
				return echarts.init(document.getElementById('mapDiv'), 'vintage');
			} else {
				return myChart;
			}
		})();

		const map_name = 'china';
		$.getJSON('./data/china.geoJson', function (geojson) {
			echarts.registerMap(map_name, geojson);
			// 使用制定的配置项和数据显示图表
			$.getJSON('./data/china.json', function (data) {
				map_data = data;
				map_data.name = '全国';
				myChart.setOption(optionMap(data.summary, data.center, data.zoom, data[data.totle.toString()], null, data.left.arr, data.bottom.arr, data.right, '全国'));
				render('全国总数据', data.totle, data.classify);
				history.push({ name: 'china', value: data.totle });
			});
		});

		const clickCity = (param) => {
			const pop = param.pop;
			const seriesIndex = param.seriesIndex;
			const value = param.value;
			if (seriesIndex === 0) {
				$.get(`./data/${param.name}.geoJson`, function (geojson) {
					echarts.registerMap(map_name, geojson);
					//使用制定的配置项和数据显示图表
					if (history.length <= 2) {
						$.getJSON(`./data/${param.name}.json`, function (data) {
							const __name = param.name === 'china' ? '全国' : param.name;
							map_data = data;
							map_data.name = __name;
							myChart.setOption(optionMap(data.summary, data.center, data.zoom, data[value.toString()], null, data.left.arr, data.bottom.arr, data.right, __name), true);
							const _name = param.name === 'china' ? '全国总数据' : param.name;
							render(_name, data.totle, data.classify);
							if (!pop) {
								history.push({ name: param.name, value: data.totle });
							}
						});
					} else if (history.length === 3) {
						//使用制定的配置项和数据显示图表
						$.getJSON(`./data/${param.name}.json`, function (data) {
							data.obj = {};
							data.obj.name = param.name;
							data.obj.value = param.value;
							data.obj.selected = true;
							// const { center, classify, summary, totle, zoom, ...args } = data;
							// map_data = { ...map_data, ...args };
							map_data = data;
							map_data.name = param.name;
							myChart.setOption(optionMap(data.summary, data.center, data.zoom, data[data.totle.toString()], data.obj, data.left.arr, data.bottom.arr, data.right, param.name), true);
							render(param.name, data.totle, data.classify);
							if (!pop) {
								history.push({ name: param.name, value: data.totle });
							}
						});
					}
				});
				return;
			} else {
				if (map_data[value.toString()]) {
					myChart.setOption(optionMap(map_data.summary, map_data.center, map_data.zoom, map_data[value.toString()], map_data.obj, map_data.left.arr, map_data.bottom.arr, map_data.right, map_data.name), true);
				} else {
					myChart.setOption(optionMap(map_data.summary, map_data.center, map_data.zoom, map_data[map_data.totle.toString()], map_data.obj, map_data.left.arr, map_data.bottom.arr, map_data.right, map_data.name), true);
				}
			}
		};

		myChart.on('click', clickCity);

		top_ele.addEventListener('click', () => {
			if (history.length == 1) {
				return;
			} else {
				const len = history.length - 2;
				Array(len).fill(0).forEach(() => {
					history.pop();
				});
			}
			const obj = history[history.length - 2];
			history.pop();
			clickCity({
				pop: true,
				seriesIndex: 0,
				value: obj.value,
				name: obj.name
			})
		});

		back.addEventListener('click', () => {
			if (history.length == 1) {
				return;
			}
			const obj = history[history.length - 2];
			history.pop();
			clickCity({
				pop: true,
				seriesIndex: 0,
				value: obj.value,
				name: obj.name
			})
		});
	}
	window.onload = load();
</script>

</html>
<!-- background: linear-gradient(0deg, #0177d5 0%, #4a76dc 50%, #4b9dfa 100%); -->